<template>

 <div id="poster">
   <el-row>
     <el-col :span="12">
        &ensp;
     </el-col>
     <el-col :span="5">
       <el-card style=" border-radius: 15px;" >
         <el-form ref="form" class="login-container" label-position="left" :model="loginForm" label-width="0px">
           <h3>
             用户登录
           </h3>
           <el-form-item label="">
             <el-input type="text" ref="username" v-model="loginForm.username" placeholder="用户名" autocomplete="off"
             prefix-icon="el-icon-user-solid"
             ></el-input>
           </el-form-item>
           <el-form-item label="">
             <el-input type="password" ref="password" v-model="loginForm.password" placeholder="密码" autocomplete="off"></el-input>
           </el-form-item>

           <el-form-item label="">
             <el-input type="password" v-model="loginForm.password" placeholder="验证码" autocomplete="off"></el-input>
           </el-form-item>

           <el-form-item>
             <el-button type="primary" @click="login">立即创建</el-button>
             <el-button @click="logout" style="">注销</el-button>
           </el-form-item>
         </el-form>
       </el-card>

     </el-col>
   </el-row>



 </div>
</template>


<script>
import * as userApi from '@/api/user'
//import navBar from "@/components/navBar";

export default {
  name: "index",

  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      }
    }
  },
  methods: {
    login() {
      if(this.loginForm.username.length>0){
        if(this.loginForm.password.length>0){
            userApi.login(this.loginForm).then(res => {
              console.log(res)
              if(res.code==20000){
                console.log("登录成功")

                //调用store/modules/user.js里的方法设置token
                this.$store.dispatch('user/login', this.loginForm).then(() => {

                }).catch(() => {
                })

                //console.log(store.getters)//取本地保存的信息，其中token就在里面
              }
            });
        }else{
          this.$message({
            message: '请输入密码',
            type: 'warning'
          });
          this.$refs.password.focus()
        }
      }else{
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        });
        this.$refs.username.focus()
      }

    },
    //注销登录一定要调用这个清空token
    async logout() {
      //清空token
      await this.$store.dispatch('user/logout')
      // 注销时删除所有tagview
      await this.$store.dispatch('tagsView/delAllViews')
      sessionStorage.removeItem('tabViews')
      this.$router.push('/')
    },

    //这个是根据token获取用户信息，一般可以用来检验token是否过期，一般可以放在mouter()方法中，当页面加载时自动执行
    checkToken(){
      if(store.getters.token!=null){
        userApi.getUserInfo().then(res => {
          //console.log(res)
          if(res.code==20000){
            if(res.data!=null){
              this.loginForm.username=res.data.name
            }else{
              //一般为空表明token过期了，获取不到对应的用户信息，所以需要用户重新登录后才能正常获取，这时就自动跳到主页面或者登录页面就行
              this.$router.push("/")
            }
          }else{
            this.$router.push("/")
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>